<template>
  <div class="bigbox">
    <!-- 搜索栏 -->
    <div class="topbox">
      <el-form :model="form" label-position="left" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用户名称">
              <!-- <el-select v-model="form.orgNo" size="small" clearable filterable >
                <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="试验类型">
              <el-select v-model="form.trialType" size="small" clearable filterable @change="changetype" style="width: 100%;">
                <el-option v-for="(item,index) in shiyanlist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="数据集">
              <el-select v-model="form.dataSet" size="small" clearable filterable @change="changeshujuji" style="width: 100%;">
                <el-option v-for="(item,index) in shujujilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="试验项">
              <el-select v-model="form.trialProjectType" size="small" clearable filterable @change="$forceUpdate()" style="width: 100%;">
                <el-option v-for="(item,index) in shiyanxianglist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-form-item label="">
              <el-button @click="chongzhi" size="small" >重 置</el-button>
              <el-button @click="getdatalist()" type="primary" size="small" >查 询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <div class="butti">
          <div></div>
          <div style="display: flex;">
            <span><el-button @click="dialogVisibles=true" type="info" size="small">系统默认</el-button></span>
            <span style="margin: 0 10px;"><el-button @click="dialogVisible=true" size="small" type="primary">新 增</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
      </div>
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="100">
            <template #default="{row}">
              <i @click="bianji(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
              <i @click=shanchu(row) class="el-icon-delete" style="color: red;cursor: pointer;"></i>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="pageobj.pageNo"
          :page-size="20"
          @current-change="getdatalist"
          :total="+totalCount">
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗区域 -->
    <div >
      <el-dialog
        :title="formdata.id?'编辑项目配置':'新增项目配置'"
        :visible.sync="dialogVisible"
        width="45%">
        <div class="dialog">
          <el-form :model=formdata label-position="right" label-width="100px" ref="formdatass">
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户名称">
                  <el-select v-model="formdata.orgNo" size="small" clearable filterable style="width:100%;" placeholder="请选择用户">
                    <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验类型">
                  <el-select v-model="formdata.trialType" size="small" clearable filterable @change="changetypes" style="width:100%;" placeholder="请选择实验类型">
                    <el-option v-for="(item,index) in shiyanlists" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据集">
                  <el-select v-model="formdata.dataSet" size="small" clearable filterable @change="changeshujujis" style="width:100%;" placeholder="请选择数据集">
                    <el-option v-for="(item,index) in shujujilists" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验项类型">
                  <el-select v-model="formdata.trialProjectType" size="small" clearable filterable style="width:100%;" @change="$forceUpdate()" placeholder="请选择实验项类型">
                    <el-option v-for="(item,index) in shiyanxianglists" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="试验项名称">
                  <el-input v-model="formdata.trialProjectName" placeholder="请输入试验项名称" size=small></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据单位">
                  <el-input v-model="formdata.unit" placeholder="请输入数据单位" size=small></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据类型">
                  <el-select v-model="formdata.dataType" size="small" clearable filterable style="width:100%;">
                    <el-option v-for="(item,index) in shujutypelist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-show="formdata.dataType=='2'">
                <el-form-item label="数据字典">
                  <el-input v-model="formdata.selectCode" placeholder="请输入数据字典" size=small></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="排序号">
                  <el-input v-model="formdata.orderNo" placeholder="请输入排序号" size=small></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                 <el-form-item label="描述说明">
                  <el-input type="textarea" v-model="formdata.description" placeholder="请输入描述说明"></el-input>
                 </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" >
          <el-button class="button" @click="close">取 消</el-button>
          <el-button class="button" type="primary" @click="submit">保 存</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 系统默认弹窗 -->
    <div>
      <el-dialog
      title="提示"
      :visible.sync="dialogVisibles"
      width="30%">
      <div class="dialog">
        <el-form :model="xitongform" :rules="rules" ref="xitongform">
          <el-row>
            <el-col :span="24">
              <el-form-item label="用户名称" prop="orgNo">
                <el-select v-model="xitongform.orgNo" size="small" clearable filterable >
                  <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" >
        <el-button  class="button" @click="xitongquxiao">取 消</el-button>
        <el-button class="button" type="primary" @click="xitongqueren">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import {getzidianxialaapi} from '@/api/guidelines'
import {getTreeListApi} from '@/api/fileFlow'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { getDictionaryApi } from '@/api/customerFile'
import {gettabledatalistapi,postaddandputapi,postdellistapi,postchushihuaapi} from '@/api/Experimental-report/Project-Configuration'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      xitongform:{},
      dialogVisibles:false,
      formdata:{},
      dialogVisible:false,
      tableData:[],
      issize: 'medium',
      form: {orgNo:'',trialType:'',dataSet:'',trialProjectType:''},
      yonghulist: [],
      shiyanlist: [],
      shujujilist: [],
      shiyanxianglist: [],
      pageobj: {
        pageNo: 1,
        pageSize:20
      },
      tableConfig: [
        { label: '序号', type:'index',width:'70',center:'center' },
        { label: '用户名称', prop: 'orgName' },
        { label: '试验类型', prop: 'trialTypeName' },
        { label: '数据集', prop: 'dataSetName' },
        { label: '试验项类型', prop: 'trialProjectTypeName' },
        { label: '试验项名称', prop: 'trialProjectName' },
        { label: '排序号', prop: 'orderNo',center:'right',width:'100' },
        { label: '描述说明', prop: 'description' },
        { label: '编辑时间', prop: 'lastOperateTime',center:'center'},
      ],
      totalCount:'',
      shiyanlists: [],
      shujujilists: [],
      shiyanxianglists: [],
      shujutypelist:[],
      rules:{
       orgNo:[
       { required: true, message: '请选择用户名称', trigger: 'blur' }
       ]
      }
    };
  },

  async mounted() {
    this.getdatalist()
    this.getshiyantype()
    const {data:{list}} =await getTreeListApi()
    this.yonghulist=list
    const shujutype=await getzidianxialaapi({dictType:'SYGL_SJLX'})
    this.shujutypelist=shujutype.data.list
  },

  methods: {
    // 新增/修改确认
    async submit(){
      const orgName=this.yonghulist.filter(ele=>ele.bizOrgNo==this.formdata.orgNo)[0].bizOrgName
     await postaddandputapi({...this.formdata,orgName}).then(res=>{
       this.$message({
        type:res.code=='200'?'success':'woraing',
        message:res.data.content
       })
     })
     this.close()
     this.getdatalist()
    },
    // 弹窗关闭
    close(){
      this.formdata={}
      // this.$refs.formdatass.resetFields()
      this.dialogVisible=false
    },
    // 重置
    chongzhi() {
      this.form = { orgNo: '', trialType: '', dataSet: '', trialProjectType: '' }
      this.getdatalist()
    },
    // 系统默认确认
    async xitongqueren(){
      await this.$refs.xitongform.validate()
      await postchushihuaapi({orgNo:this.xitongform.orgNo,templateOrgNo:''}).then(res=>{
        this.$message({
            type:res.code=='200'?'success':'woraing',
            message:res.data.content
          })
        })
      this.getdatalist()
      this.xitongquxiao()
    },
    // 系统取消
    xitongquxiao(){
      this.$refs.xitongform.resetFields()
      this.dialogVisibles=false
      // this.xitongform.orgNo=''
    },
    // 删除
    shanchu(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postdellistapi({id:row.id}).then(res=>{
            this.$message({
              type:res.code=='200'?'success':'woraing',
              message:res.data.content
            })
          })
          this.getdatalist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑打开弹窗
    bianji(row){
      this.dialogVisible=true
      this.getshujujis(row.trialType)
      this.getshiyanxiangs(row.dataSet)
      this.formdata={...row}
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const { data: { list, totalCount } } = await gettabledatalistapi({ ...this.form, _pageNo: this.pageobj.pageNo - 1, _pageSize: this.pageobj.pageSize })
      this.totalCount = totalCount
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 获取试验类型
    async getshiyantype() {
      const { data: { list } } = await getDictionaryApi('SYGL_SYLX','')
      this.shiyanlist=list
      this.shiyanlists=list
    },
    // 实验类型下拉
    changetype(val) {
      this.form.dataSet = ''
      this.form.trialProjectType=''
      this.getshujuji(val)
    },
    // 获取数据集
    async getshujuji(val) {
      const { data: { list } } = await getDictionaryApi('SYGL_SYLX',val)
      this.shujujilist=list
    },
    // 数据集下拉
    changeshujuji(val) {
      this.form.trialProjectType=''
      this.getshiyanxiang(val)
    },
    // 获取试验项类型
    async getshiyanxiang(val) {
      const { data: { list } } = await getDictionaryApi('SYGL_SYLX',val)
      this.shiyanxianglist=list
    },
    // 导出
    daochu() {
      exportexcel('pio-microservice-biz/pio/trial-project/excel',this.form,'试验项配置')
    },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
    command(val) {
        if (val === '默认') {
          this.issize = 'medium'
        } else if (val === '中等') {
          this.issize = 'small'
        } else {
          this.issize = 'mini'
        }
      },
    // 实验类型下拉
    changetypes(val) {
      this.formdata.dataSet = ''
      this.formdata.trialProjectType=''
      this.getshujujis(val)
    },
    // 获取数据集
    async getshujujis(val) {
      const { data: { list } } = await getDictionaryApi('SYGL_SYLX',val)
      this.shujujilists=list
    },
    // 数据集下拉
    changeshujujis(val) {
      this.formdata.trialProjectType=''
      this.getshiyanxiangs(val)
    },
    // 获取试验项类型
    async getshiyanxiangs(val) {
      const { data: { list } } = await getDictionaryApi('SYGL_SYLX',val)
      this.shiyanxianglists=list
    },
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .butti{
      display: flex;
      justify-content: space-between;
      .button{
        width: 60px;
        height: 30px;
        border: none;
        border-radius: 3px;
        background-color: #3b8eea;
        color: #fff;
        margin-right: 10px;
      }
      .xitong{
        background-color: #b2b2b2;
        width: auto;
        height: 30px;
        padding: 0 10px;
        margin-right: 10px;
        border: none;
      }
    }
    .table{
      height: 88%;
      margin: 10px 0;
    }
    .fenye{
      text-align: right;
    }
  }
  .dialog{
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
    padding: 20px 0;
  }
  .button{
      width: auto;
      height: 30px;
      padding: 0 10px;
    }
}
::v-deep .el-col-4{
  text-align: right;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-dialog__body{
  padding: 0 20px;
}
::v-deep .el-row{
  margin-bottom: 10px;
}
</style>